<template>
  	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<!-- 搜索框 -->
				<div class="left-wrapped">
					<div class="search-wrapped">
						<el-input v-model="account" class="w-50 m-2" size="large" clearable placeholder="输入账号进行搜索"
							:prefix-icon="Search" @change='searchUserByAccount()' />
					</div>
					<div class="select-wrapped">
						<el-select style="width: 200px;" v-model="department" placeholder="请选择部门" clearable @change="searchForDepartment">
							<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
						</el-select>
					</div>
				</div>
				<div class="button-wrapped">
					<el-button plain type="primary" @click="banUserList">筛选冻结用户</el-button>
					<el-button plain type="primary" @click="getFirstPageList">显示全部用户</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border @row-dblclick='openUser'>
					<el-table-column type="index" width="50" />
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="sex" label="性别" />
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="email" label="邮箱" />
					<el-table-column prop="status" label="状态">
						<template #default="{row}">
							<div>
								<el-tag v-if="row.status=='1'" class="ml-2">冻结</el-tag>
								<el-tag class="ml-2" type="success" v-else>正常</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间">
						<template #default="{row}">
							<div>{{row.create_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="update_time" label="更新时间">
						<template #default="{row}">
							<div>{{row.update_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template #default="{row}">
							<div>
								<el-button type="primary" @click="banUserById(row.id)"
									:disabled='row.status==1'>冻结</el-button>
								<el-button type="success" @click="hotUserById(row.id)"
									:disabled='row.status==0'>解冻</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
						 <el-pagination @current-change="getData" @size-change="getData(1)" v-model:current-page="paginationData.currentPage"
          v-model:page-size="paginationData.pageCount" :page-sizes="[3, 5, 7, 10]" background
          layout="prev,pager,next,jumper,-> ,sizes,total" :total="total" />
		</div>
	</div>
	<userinfo ref="userInfo" @delSuccess="getList" @success="getData(paginationData.currentPage)"></userinfo>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { Search } from '@element-plus/icons-vue'
import {getDepartment} from '@/api/setting/index'
import {getAdminList,getBanList,banHotUser} from '@/api/userinfo/index'
import type {adminListForm,banHotUserForm} from '@/api/userinfo/type'
import { ElMessage } from "element-plus"
import userinfo from '../components/user_info.vue'
const account = ref('')
const searchUserByAccount = ()=>{
	getData(1)
}
const getList = ()=>{
	//判断是不是最后一页的最后一条数据
     paginationData.currentPage = tableData.value.length > 1 ? paginationData.currentPage : paginationData.currentPage - 1
	 getData(paginationData.currentPage)
}
const tableData = ref([])
//冻结用户
const banUserById = async(id:number)=>{
	let data:banHotUserForm = { status:1, id:id,}
	const res = await banHotUser(data)
	if(res.status == 0){
		ElMessage({
			type:'success',
			message:'冻结成功'
		})
		getData(paginationData.currentPage)
	}else{
		ElMessage({
			type:'error',
			message:'冻结失败'
		})
	}
}
//解冻
const hotUserById = async(id:number)=>{
	let data:banHotUserForm = { status:0, id:id,}
	const res = await banHotUser(data)
	if(res.status == 0){
		ElMessage({
			type:'success',
			message:'解冻成功'
		})
		getData(paginationData.currentPage)
	}else{
		ElMessage({
			type:'error',
			message:'解冻失败'
		})
	}
}
const total = ref()
const paginationData = reactive({
    currentPage:1,
    pageCount:10,
})
onMounted(()=>{
	//部门列表
	returnDepartment()
	getData(paginationData.currentPage)
})
const getData = async (page:number)=>{
    let data:adminListForm = {
        identity:'用户',
        page:page ? page : paginationData.currentPage,
        pageSize:paginationData.pageCount
    }
    if(account.value){
        data['account'] = account.value
    }
  const res =  await getAdminList(data)
  if(res.status == 0){
    tableData.value = res.data.list
    total.value = res.data.total
  }
}
const currentChange = ()=>{}
const department = ref()
const departmentData = ref([])
const returnDepartment = async()=>{
	const res = await getDepartment()
	if(res.status == 0){
		departmentData.value = JSON.parse(res.data)
	}
}
const  searchForDepartment =  ()=>{
	getData(1)
}
//筛选冻结用户
const banUserList = async ()=>{
	const res = await getBanList()
	if(res.status == 0){
		  tableData.value = res.data
		  total.value = res.data.length
	}
}
//显示全部用户
const getFirstPageList = ()=>{
	getData(1)
}

//
const userInfo = ref()
const openUser = (row:any)=>{
	userInfo.value.open(row)
}
</script>

<style scoped>
@import url('@/assets//css/common.scss');
</style>
